import React, { useState } from 'react'
import './UserAvatar.css';
import WeChatLoginModal from '@/components/WeChatLoginModal'
const UserAvatar = () => {
  const [showUserMenu, setShowUserMenu] = useState(false)
  const [isLoggedIn, setIsLoggedIn] = useState(true) // 控制登录状态
  // const [showLogin, setShowLogin] = useState(true)

  const handleLogout = () => {
    // 清除本地存储的用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    // 设置登录状态为false，显示登录注册按钮
    setIsLoggedIn(false)
    setShowUserMenu(false)
  }

  const handleLogin = () => {
    setShowLogin(true)
    // 这里可以添加登录逻辑
    console.log('跳转到登录页面')
    // 可以添加重定向到登录页面的逻辑
    // window.location.href = '/login'
  }
  // const handleLoginSuccess = () => {
  //   setIsLoggedIn(true)
  //   setShowLogin(false)
  // }
  const userInfo = {
    name: '小鲨鱼',
    role: '创建者',
    userId: '107944274',
    avatar: 'KTV',
    membership: '免费版',
    storage: { used: '0K', total: '3G' },
    aiStickers: 100
  }
  return (
    <div className="user-header">
      {/* <WeChatLoginModal
        open={showLogin}
        onClose={() => setShowLogin(false)}
        onLoginSuccess={handleLoginSuccess}
      /> */}
      <div className="header-search">
        <input className="search-input" placeholder="输入关键词搜索你想要的模板或素材" />
        <span className="search-camera">📷</span>
      </div>
      <div className="header-actions">
        <a className="header-link">定制设计</a>
        <a className="header-link">打印定制</a>
        <a className="header-link">企业服务</a>
        <button className="header-vip">开通会员</button>
        <div className="header-account">
          <button className="account-btn">个人版 ▼</button>
        </div>
      </div>
      {isLoggedIn ? (
        <div
          className="user-avatar"
          onMouseEnter={() => setShowUserMenu(true)}
        >
          <div className="avatar-circle">
            <span className="avatar-text">{userInfo.avatar}</span>
          </div>

          {/* 用户信息下拉菜单 */}
          {showUserMenu && (
            <div
              className="user-menu"
              onMouseEnter={() => setShowUserMenu(true)}
              onMouseLeave={() => setShowUserMenu(false)}
            >
              {/* 用户信息区域 */}
              <div className="user-info-section">
                <div className="user-avatar-large">
                  <span className="avatar-text">{userInfo.avatar}</span>
                </div>
                <div className="user-details">
                  <div className="user-name">
                    {userInfo.name}
                    <span className="user-role">{userInfo.role}</span>
                  </div>
                  <div className="user-id">
                    用户ID: {userInfo.userId}
                    <button className="copy-btn">📋</button>
                  </div>
                </div>
              </div>

              {/* 会员推广区域 */}
              <div className="membership-section">
                <div className="membership-content">
                  <div className="membership-header">
                    <span className="membership-icon">V</span>
                    <span className="membership-title">{userInfo.membership}</span>
                  </div>
                  <div className="membership-desc">开通会员尊享专属特权</div>
                  <div className="membership-benefits">50万+模板·商用授权·无水印下载</div>
                </div>
                <button className="upgrade-btn">立即开通</button>
              </div>

              {/* 功能使用情况 */}
              <div className="usage-section">
                <div className="usage-cards">
                  <div className="usage-card">
                    <div className="usage-title">
                      存储空间
                      <span>扩容 {'>'}</span>
                    </div>
                    <div className="usage-progress">
                      <div className="progress-bar">
                        <div className="progress-fill" style={{ width: '0%' }}></div>
                      </div>
                    </div>
                    <div className="usage-text">{userInfo.storage.used} / {userInfo.storage.total}</div>
                  </div>

                  <div className="usage-card">
                    <div className="usage-title">
                      AI贴贴
                      <span>加购 {'>'}</span>
                    </div>
                    <div className="ai-stickers">
                      <span className="sticker-count">{userInfo.aiStickers}</span>
                    </div>
                    <div className="sticker-desc">
                      <span>会员每月免费领贴贴</span>
                      <span>{'>'}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* 账户管理 */}
              <div className="account-section">
                <div className="account-header">
                  <div className="free-trial-badge">免费体验</div>
                  <div className="account-user">
                    <div className="account-avatar">
                      <span className="avatar-text">{userInfo.avatar}</span>
                    </div>
                    <div className="account-name-container">
                      <span className="account-name-main">{userInfo.name}.</span>
                      <span className="account-name-sub">个人版</span>
                    </div>
                  </div>
                  <span className="create-team-btn">+ 创建团队</span>
                </div>

                <div className="account-menu">
                  <div className="menu-item">
                    <span className="menu-icon">⚙️</span>
                    <span className="menu-text">团队管理</span>
                  </div>
                  <div className="menu-item">
                    <span className="menu-icon">📄</span>
                    <span className="menu-text">订单/发票</span>
                  </div>
                  <div className="menu-item">
                    <span className="menu-icon">💬</span>
                    <span className="menu-text">消息中心</span>
                  </div>
                  <div className="menu-item">
                    <span className="menu-icon">🎫</span>
                    <span className="menu-text">我的优惠券</span>
                  </div>
                </div>
              </div>

              {/* 退出登录按钮 */}
              <button className="logout-btn" onClick={handleLogout}>
                退出登录
              </button>
            </div>
          )}
        </div>
      ) : (
        <div className="auth-buttons">
          <button className="login-btn" onClick={handleLogin}>
            登录
          </button>

        </div>
      )}
    </div>
  )
}

export default UserAvatar
